<template>
	<view>
		<view class="each">
			<view class="name">姓名</view>
			<view class="z-flex">
				<input type="text" placeholder="请输入您的姓名" />
			</view>
		</view>
		<view class="each">
			<view class="name">所在地</view>
			<view class="z-flex">
				<input type="text" disabled placeholder="点击选择" />
				<image src="../../static/index/hy-right.png" mode=""></image>
			</view>
		</view>
		<view class="each">
			<view class="name">手机号</view>
			<view class="z-flex">
				<input type="text" placeholder="请输入您的手机号" />
			</view>
		</view>
		<view class="each2">
			<view class="name">什么时候方便联系您（单选）</view>
			<view class="Options-box">
				<view class="Options" @click="option=0"> <image :src="option==0?'../../static/login/choosed.png':'../../static/login/choose.png'" mode=""></image>上午 </view>
				<view class="Options" @click="option=1"> <image :src="option==1?'../../static/login/choosed.png':'../../static/login/choose.png'" mode=""></image>中午 </view>
				<view class="Options" @click="option=2"> <image :src="option==2?'../../static/login/choosed.png':'../../static/login/choose.png'" mode=""></image>下午 </view>
				<view class="Options" @click="option=3"> <image :src="option==3?'../../static/login/choosed.png':'../../static/login/choose.png'" mode=""></image>晚上 </view>
			</view>
		</view>
		
		<view class="btn-box">
			<view class="PlaceAnOrder-btn" @click="">测算收益，获取资料</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option:0
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
	}
	.each {
		width: 622rpx;
		padding: 34rpx 32rpx;
		// height: 106rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.name {
			font-weight: bold;
			font-size: 28rpx;
			color: #1C274C;
		}
		input {
			font-size: 28rpx;
			text-align: right;
		}
		image {
			width: 30rpx;
			height: 30rpx;
		}
	}
	
	.each2 {
		width: 622rpx;
		padding: 34rpx 32rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 24rpx;
		.name {
			font-weight: bold;
			font-size: 28rpx;
			color: #1C274C;
		}
		.Options-box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			
			.Options {
				margin-right: 42rpx;
				margin-top: 24rpx;
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
					vertical-align: middle;
				}
				font-weight: 500;
				font-size: 28rpx;
				color: #A4A9B7;
			}
		}
	}
	
	.btn-box {
		width: 100%;
		position: fixed;
		bottom: 40rpx;
		z-index: 9;
		.PlaceAnOrder-btn {
			width: 686rpx;
			height: 106rpx;
			margin: auto;
			background: #4BC264;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 800;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 106rpx;
			text-align: center;
		}
	}
</style>
